<template>
<div>
      <a-card :bordered="false" style="margin-bottom: 20px">
        <detail-list title="Host1_MZ1">
          <detail-list-item term="PPID">1000000000</detail-list-item>
          <detail-list-item term="产品编号">已取货</detail-list-item>
          <detail-list-item term="产品尺寸">3*21</detail-list-item>
          <detail-list-item term="创建时间">2020-05-30</detail-list-item>
          <detail-list-item term="启用时间">2020-05-30</detail-list-item>
          <detail-list-item term="创建人">tt</detail-list-item>
        </detail-list>
      </a-card>
      <a-card>
        <detail-list>
            <a-tabs default-active-key="1" @change="callback">
                <a-tab-pane :key="item.key" :tab="item.tab" v-for="item in tabsList">
                     <a-table
                    row-key="id"
                    style="margin-bottom: 24px"
                    :columns="goodsColumns"
                    :dataSource="goodsData"
                    :pagination="false"
                    >
                     <div slot="action" slot-scope="{text, record}">
                      <a-button type="link" @click="goSee(record)">查看</a-button>
                    </div>
                    </a-table>
                </a-tab-pane>
            </a-tabs>
        </detail-list>

        <a-drawer
        class="fd-pDetail-drawer"
        title="设备配方参数列表"
        placement="right"
        width="500px"
        :closable="false"
        :visible="visible"
        @close="onClose">
            <a-card class="fd-pDetail-card" :bordered="false">
                <detail-list :col="2">
                    <detail-list-item term="设备">1000000000</detail-list-item>
                    <detail-list-item term="Recipe ID">已取货</detail-list-item>
                    <detail-list-item term="产品类型">3*21</detail-list-item>
                </detail-list>
            </a-card>

            <a-tabs default-active-key="1" @change="callback">
                <a-tab-pane :key="item.key" :tab="item.tab" v-for="item in pubList">
                    <a-table
                    row-key="id"
                    style="margin-bottom: 24px"
                    :columns="pubColumns"
                    :dataSource="pubData"
                    :pagination="false"
                    >
                    </a-table>
                </a-tab-pane>
            </a-tabs>
        </a-drawer>
      </a-card>
</div>
</template>

<script>
import DetailList from '@/components/tool/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'BasicDetail',
  components: {DetailListItem, DetailList},
  data () {
    return {
        visible:false,
        goodsColumns:[
        {
            title: '设备',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: 'Recipe ID',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '创建时间',
            dataIndex: 'barcode',
            key: 'barcode'
        },
        {
            title: '最后更新时间',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '操作',
            scopedSlots: { customRender: 'action' },
            align: 'left'
        }
        ],
        pubColumns:[
            {
                title: '参数名称',
                dataIndex: 'id',
                key: 'id'
            },
            {
                title: '参数类型',
                dataIndex: 'id',
                key: 'id'
            },
            {
                title: '参数值',
                dataIndex: 'id',
                key: 'id'
            },
            {
                title: '单位',
                dataIndex: 'id',
                key: 'id'
            },
        ],
      goodsData:[
          {id:122,name:'32'}
      ],
      pubData:[],
      tabsList:[
          {tab:'设备配方数据',key:'1'},
          {tab:'事件触发日志',key:'2'},
      ],
      pubList:[
          {tab:'工艺参数',key:'1'},
          {tab:'设备参数',key:'2'},
      ],
    }
  },
    methods:{
      goSee(record){
        this.visible = true
      },
      onClose() {this.visible = false},
      callback(val){
        if(val===2){
            this.goodsColumns=[
            {
                title: '事件名称',
                dataIndex: 'id',
                key: 'id'
            },
            {
                title: '数据标识',
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: '触发时间',
                dataIndex: 'barcode',
                key: 'barcode'
            },
            {
                title: '返回参数',
                dataIndex: 'price',
                key: 'price',
            }
            ]
        }
      }
  }
}
</script>

<style lang="less" scoped>
    .title {
        color: @title-color;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 16px;
    }
    .fd-pDetail-card {
        background: url("bg1.png") no-repeat 100% 100%;
    }
    .fd-pDetail-drawer /deep/ .ant-drawer-title {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
    }
    .fd-pDetail-drawer /deep/ .ant-drawer-title::before {
        background: #0182FE;
        color: #0182FE;
        margin-right: 5px;
        content: "|";
        font-size: 12px;
    }
</style>
